const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
    mode: 'development',
    devtool: false,
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),//打包后输出的文件可以是硬盘上的任意位置
        filename: '[name].js',
    },
    devServer: {
        hot: true,//配置模块的热更新
        //真实的含义是配置额外的静态文件根目录，不用配置dist，dist本来就能用
        contentBase: path.resolve(__dirname, 'public'),
        compress: true,//启动压缩 gzip
        port: 8080,
        open: true,//启动之后自动打开浏览器
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            [
                                ["@babel/preset-env",{
                                    modules:false
                                }]
                            ], "@babel/preset-react"],
                        plugins: [
                            ['@babel/plugin-transform-runtime',{

                                corejs:3,//配置corejs可以转换API和方法
                                helpers:true,
                                regenerator:true
                            }],
                            ["@babel/plugin-proposal-decorators", { legacy: true }],
                            ["@babel/plugin-proposal-class-properties", { loose: true }]
                        ]
                    }

                }
            },
            {
                test: /\.css$/,
                //最后一个loader,就上面最左边的loader一定要返回一个JS脚本
                //1读取CSS内容给css-loader
                use: ['style-loader',
                    {
                        loader: 'css-loader',
                        options: {//如果不配的话默认值是0
                            importLoaders: 1
                        }//对于包含的CSS文件而言，要使用前面的几个loader来处理
                    }, 'postcss-loader',{
                        loader:'px2rem-loader',
                        options:{
                            remUnit:150,// 一个REM是多少个像素
                            remPrecision:8//计算REM的单位，保留几位小数 设置精度
                        }
                    }]
            },
            {
                test: /\.less$/,
                //最后一个loader,就上面最左边的loader一定要返回一个JS脚本
                use: ['style-loader', {
                    loader: 'css-loader',
                    options: {//如果不配的话默认值是0
                        importLoaders: 0
                    }//对于包含的CSS文件而言，要使用前面的几个loader来处理
                }, 'postcss-loader', 'less-loader']
            },//js import require
            {
                test: /\.(jpg|png|bmp|gif|svg)$/,
                //type:'asset' //相当于原来的 file-loader
                use: [
                    {   //url-loader可以把一些小图片变成 base64字符串内嵌在页面中
                        loader: 'url-loader',
                        options: {
                            //name:'[hash:10].[ext]',
                            esModule: false,//是否包装成一个ES6模块 Module.default
                            limit: 8 * 1024, //8K
                            outputPath: 'images',//指定写入到输出目录里images里
                            publicPath: '/images'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            minify: {//压缩HTML
                collapseWhitespace: true,
                removeComments: true
            }
        }),
        new CleanWebpackPlugin({//再重新打包前先把输出目录 清空一下
            cleanOnceBeforeBuildPatterns: ['**/*']
        })
    ]
}